
@success-color: #4eb819;
@primary-color: #409eff;
@warning-color: #e6a23c;
@danger-color: #f56c6c;
@cancel-color: #909399;



.success-arrow {
  fill: @success-color;
  stroke: @success-color;
}

.success-conditional {
  fill: white;
  stroke: @success-color;
}

.fail-arrow {
  fill: @warning-color;
  stroke: @warning-color;
}

.fail-conditional {
  fill: white;
  stroke: @warning-color;
}

.success.djs-connection {
  .djs-visual path {
    stroke: @success-color!important;
    marker-end: url('#sequenceflow-end-white-success') !important;
  }
}

.success.djs-connection.condition-expression {
  .djs-visual path {
    marker-start: url('#conditional-flow-marker-white-success') !important;
  }
}

.success.djs-shape {
  .djs-visual rect {
    fill: @success-color!important;
    stroke: @success-color!important;
    fill-opacity: 0.15!important;
  }

  .djs-visual polygon {
    stroke: @success-color!important;
  }

  .djs-visual path:nth-child(2) {
    fill: @success-color!important;
    stroke: @success-color!important;
  }

  .djs-visual circle {
    fill: @success-color!important;
    stroke: @success-color!important;
    fill-opacity: 0.15!important;
  }
}

.primary.djs-shape {
  .djs-visual rect {
    fill: @primary-color!important;
    stroke: @primary-color!important;
    fill-opacity: 0.15!important;
  }

  .djs-visual polygon {
    stroke: @primary-color!important;
  }

  .djs-visual circle {
    fill: @primary-color!important;
    stroke: @primary-color!important;
    fill-opacity: 0.15!important;
  }
}

.warning.djs-connection {
  .djs-visual path {
    stroke: @warning-color!important;
    marker-end: url('#sequenceflow-end-white-fail')!important;
  }
}

.warning.djs-connection.condition-expression {
  .djs-visual path {
    marker-start: url('#conditional-flow-marker-white-fail')!important;
  }
}

.warning.djs-shape {
  .djs-visual rect {
    fill: @warning-color!important;
    stroke: @warning-color!important;
    fill-opacity: 0.15!important;
  }

  .djs-visual polygon {
    stroke: @warning-color!important;
  }

  .djs-visual path:nth-child(2) {
    fill: @warning-color!important;
    stroke: @warning-color!important;
  }

  .djs-visual circle {
    fill: @warning-color!important;
    stroke: @warning-color!important;
    fill-opacity: 0.15!important;
  }
}

.danger.djs-shape {
  .djs-visual rect {
    fill: @danger-color!important;
    stroke: @danger-color!important;
    fill-opacity: 0.15!important;
  }

  .djs-visual polygon {
    stroke: @danger-color!important;
  }

  .djs-visual circle {
    fill: @danger-color!important;
    stroke: @danger-color!important;
    fill-opacity: 0.15!important;
  }
}

.cancel.djs-shape {
  .djs-visual rect {
    fill: @cancel-color!important;
    stroke: @cancel-color!important;
    fill-opacity: 0.15!important;
  }

  .djs-visual polygon {
    stroke: @cancel-color!important;
  }

  .djs-visual circle {
    fill: @cancel-color!important;
    stroke: @cancel-color!important;
    fill-opacity: 0.15!important;
  }
}